{% extends 'base.html' %}

{% block title %}餐厅列表{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12 mb-4">
        <h2>餐厅列表</h2>
    </div>
    {% for restaurant in restaurants %}
    <div class="col-md-4 mb-4">
        <div class="card h-100">
            {% if restaurant.image %}
                <img src="{{ restaurant.image.url }}" class="card-img-top" alt="{{ restaurant.name }}">
            {% endif %}
            <div class="card-body">
                <h5 class="card-title">{{ restaurant.name }}</h5>
                <p class="card-text">{{ restaurant.description|truncatewords:20 }}</p>
                <p class="card-text">
                    <small class="text-muted">
                        <i class="fas fa-map-marker-alt"></i> {{ restaurant.address }}
                    </small>
                </p>
            </div>
            <div class="card-footer">
                <a href="{% url 'restaurant_detail' restaurant.id %}" class="btn btn-primary">查看菜单</a>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12">
        <p class="text-center">暂无餐厅信息</p>
    </div>
    {% endfor %}
</div>

{% if is_paginated %}
<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
            </li>
        {% endif %}

        {% for num in page_obj.paginator.page_range %}
            <li class="page-item {% if page_obj.number == num %}active{% endif %}">
                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
            </li>
        {% endfor %}

        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
            </li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %}
